<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    2.根据数据生成表单

    <div class="ddiivv"></div>


    <script>
        var arr = [{
            label: "用户名",
            name: "username",
            type: "text"
        }, {
            label: "密码",
            name: "password",
            type: "password"
        }, {
            label: "性别",
            name: "gender",
            type: "select",
            value: ['男', '女', '不男', '不女', 'Gay', '妖王']
        }, {
            label: "爱好",
            name: "hobby",
            type: "checkbox",
            value: ['篮球', '足球', '羽毛球', '兵乓球', '爬山', '购物', '旅游', '看美女']
        }, {
            label: '是否已婚',
            name: 'married',
            type: 'radio',
            value: ['已婚', '未婚']
        },
        {
            label: '简介',
            name: 'resume',
            type: 'textarea'
        }];

        function xuanran() {
            let ddiivv = document.querySelector(".ddiivv");
            for (let i = 0; i < arr.length; i++) {
                let a = document.createElement("label");
                let t1 = document.createTextNode(arr[i].label);
                a.appendChild(t1)
                ddiivv.appendChild(a);
                let b = document.createElement("input");
                if (arr[i].type == "select") {
                    b = document.createElement("select")
                    b.setAttribute("name", arr[i].name)
                    for (let j = 0; j < arr[i].value.length; j++) {
                        let opt = document.createElement("option");
                        opt.innerHTML = arr[i].value[j];
                        b.appendChild(opt)
                    }
                } else if (arr[i].type == "checkbox" || arr[i].type == "radio") {
                    let box = document.createElement("span");
                    for (let j = 0; j < arr[i].value.length; j++) {
                        let c = document.createElement("input")
                        let la = document.createElement("label");
                        c.setAttribute("type", arr[i].type);
                        c.setAttribute("name", arr[i].name);
                        la.appendChild(c)
                        let text1 = document.createTextNode(arr[i].value[j]);
                        la.appendChild(text1);
                        box.appendChild(la);
                    }
                    b = box;
                } else if (arr[i].type == "textarea") {
                    b = document.createElement("textarea");
                    b.setAttribute("name", arr[i].name)
                }


                ddiivv.appendChild(b)


            }

        }
        xuanran()
    </script>
</body>

</html>